<!--
 * @Descripttion:
 * @version:
 * @Author: lehaixia
 * @Date: 2022-10-25 15:57:33
 * @LastEditors: lehaixia
 * @LastEditTime: 2022-11-07 14:43:20
-->
<template>
  <div class="file-item">
    <div class="image" @click="clickHandle">
      <van-image :src="comSrc" :fit="fit" :width="width" :height="height" :radius="radius" />
    </div>
    <div v-if="!readonly" class="delete" @click.stop="handleDelete">
      <i class="van-icon van-icon-cross van-uploader__preview-delete-icon" />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    index: {
      type: Number,
      default: undefined
    },
    fit: {
      type: String,
      default: 'contain'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    radius: {
      type: [Number, String],
      default: 0
    },
    readonly: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
    }
  },
  computed: {
    realType() {
      return this.item.typeName ? this.item.typeName : (this.item.attachmentUrl || '').split(/\./g).pop()
    },
    isOffice() {
      return /^.?(docx?|pdf|xlsx?|pptx?)$/.test(this.realType)
    },
    isZip() {
      return /^.?zip$/.test(this.realType)
    },
    comSrc() {
      if (!this.item || !this.item.attachmentPath) return ''
      return this.$formatURL(this.item.attachmentPath)
      // return /^.?docx?$/.test(this.realType) ? docx : /^.?pdf$/.test(this.realType) ? pdf : /^.?xlsx?$/.test(this.realType) ? excel : /^.?zip$/.test(this.realType) ? zip : /^.?dwg$/.test(this.realType) ? dwg : /^.?pptx?$/.test(this.realType) ? ppt : this.$filterURL(this.item.attachmentUrl)
    },
    noPreview() {
      return this.isOffice || /^dwg$/.test(this.realType)
    }
  },
  methods: {
    clickHandle() {
      if (this.isZip) return
      if (this.noPreview) {
        this.$toast.fail('该文件不支持预览！请下载查看！')
      } else {
        this.$emit('click', this.index)
      }
    },
    handleDelete() {
      this.$emit('delete', this.item)
    }
  }
}
</script>

<style lang="less" scoped>
.file-item{
  position: relative;
  margin:  14px 0;
  &:nth-last-of-type(1) {
    margin-bottom: 0;
  }
  .image{
    width: 100%;
    height: 151px;
  }

  .delete {
    position: absolute;
    top: 0;
    right: 0;
    width: 0.373333rem;
    height: 0.373333rem;
    background-color: rgba(0,0,0,.7);
    border-radius: 0 0 0 0.32rem;
  }
  .van-icon-cross:before {
    content: '\e6a7';
  }
}
</style>
